/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

#breadcrumbs {
  background-color: $ic-content-background-color;
  > ul {
    margin: 0;
    padding: 4px $ic-content-padding;
    list-style: none;
    padding: 0;
    > li {
      display: inline-block;
      white-space: nowrap;
      vertical-align: top;
      @include fontSize(18px);
      // temporary solution for new styles before crumbs are re-done:
      // we do not want to see the home link
      &:first-of-type { display: none; }
      &:nth-child(2):before { display: none; }

      // We need to give the <span class="ellipsis"> a display other than inline so
      // it can do the ellipsis thing. But if we use block or inline-block we get
      // white space issues, hence the float.
      > a .ellipsis {
        float: right;
        line-height: inherit;
        // firefox has a bug so it can't do it like the rest of the browsers:
        // https://bugzilla.mozilla.org/show_bug.cgi?id=488725
        // so we have to do it differently, but doing it this way doesn't work in safari.
        .ff & {
          float: none;
          display: inline-block;
          position: relative;
          top: 5px;
          margin-top: -5px;
        }
      }

      + li {
        &:before {
          content: "";
          width: 5px; height: 9px;
          display: inline-block;
          margin: 0 ($ic-sp - 3);
          background: url("/images/breadcrumb-arrow-light.svg") no-repeat 50% 50%;
          background-size: 5px 9px;
        }
        &:last-of-type a {
          color: $ic-font-color-dark;
        }
      }
    }
  }

  .icon-home:before {
    @include fontSize(10px);
    color: $ic-font-color--subdued;
  }
}
